<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 300px;height: 300px;background-color: red;}
    </style>
</head>
<body style="height: 3000px;">
    <div class="box"></div>
    <!-- event对象的其他属性 -->
    1.type:获取到当前操作的事件类型,获取的事件不显示on
    2.button属性:它是一个数字,代表鼠标按键,0-鼠标左键,1代表鼠标滚轮,2代表鼠标右键
    3.鼠标事件中获取鼠标的位置属性
    3.1clientX,clientY:鼠标相对于可视区的位置
    3.2pageX,pageY:鼠标相对于整个文档的位置
    正常情况下,得到的值是一样的
    但是如果页面存在滚动条,不一样
    <script>
        // document.onmousedown=function(e){
        //     e=e || event;
        //     console.log(e);
        //     console.log(e.offsetX,e.offsetY);
        //     console.log('可视区'+e.clientX,e.clientY);
        //     console.log('文档区'+e.pageX,e.pageY);
        // }
    </script>

    3.3offsetX和offsetY:鼠标相对于操作元素(鼠标位置)到元素边缘(左上)的位置
    3.4screenX和screenY:鼠标相对于电脑显示屏的位置
    <script>
        document.onmousedown=function(e){
            e=e || event;
            console.log(e.offsetX,e.offsetY);
            console.log('可视区'+e.clientX,e.clientY);
            console.log('文档区'+e.pageX,e.pageY);
            console.log('距离屏幕区域'+e.screenX,e.screenY);
        }
    </script>
</body>
</html>